﻿<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="MapDrawAreaPage.ascx.cs" Inherits="IDotNet.MapLibs.Web.Pages.MapDrawAreaPage" %>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <title>在地图上选择点</title>
    <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
    <style type="text/css">
        body, html {
            width: 100%;
            height: 100%;
            font-size: 14px;
            margin: 0;
            padding: 0;
            font-family: "微软雅黑";
            overflow: hidden;
        }

        ul {
            margin: 0;
            padding: 0;
        }

        body {
            position: relative;
        }

        #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: relative;
            zoom: 1;
            min-height: 200px;
        }

        .config li {
            padding: 2px;
        }

        #topColorSet li {
            float: left;
            list-style: none;
            padding-right: 20px;
        }

        #topColorSet {
            clear: both;
        }

        .colorShow {
            width: 50px;
            border: 1px solid #3e3e3e;
            display: inline-block;
            height: 20px;
            *display: inline;
            *zoom: 1;
        }

        a {
            text-decoration: none;
            color: blue;
        }
    </style>
</head>
<body>
    <div>
        <ul class="config" id="topColorSet">
            <li>
                <label>边线颜色: </label>
                <div data-name="strokeColor" class="colorShow" style="background-color: red">&nbsp;</div>
            </li>
            <li>
                <label>填充颜色: </label>
                <div data-name="fillColor" class="colorShow" style="background-color: red">&nbsp;</div>
            </li>
            <li>
                <input type="button" value="保存" onclick="mapDrawArea.btnSave()" />
            </li>
            <li>
                <small><a title="1.选择地图右上角工具（多边形或矩形）
2.画多边形：在地图上不同点单击地图，双击鼠标结束
2.画矩形：单击地图，在地图上拖动鼠标画图形，松开鼠标结束
3.在所绘图形上右键可设置属性
4.只有标记后的区域在保存时才会返回">使用帮助</a></small>
            </li>
        </ul>
        <div style="width: 100%; height: 0; clear: both;"></div>
        <div style="display: none">
            <div id="infoWindow">
                <ul class="config">
                    <li>选择所属：<select id="mapBelongs"></select>
                        <a href="javascript:;" id="btnSignMapBelong">标记</a>
                    </li>
                    <li>
                        <label>边线颜色: </label>
                        <div data-name="strokeColor" class="colorShow" style="background-color: red">&nbsp;</div>
                    </li>
                    <li>
                        <label>填充颜色: </label>
                        <div data-name="fillColor" class="colorShow" style="background-color: red">&nbsp;</div>
                    </li>
                    <li>
                        <a href="javascript:;" id="btnClearArea">清除此区域</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div id="allmap">
        <div id="map" style="height: 100%; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;"></div>
    </div>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=<%:MapAk %>"></script>
    <script src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
    <script src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>
    <script src="content/js/MapCommon.js"></script>
    <!--[if lt IE 8]>
    <script src="content/js/json2.min.js"></script>
    <![endif]-->
    <script src="content/js/jquery.min.js"></script>
    <script src="content/js/jquery.colorpicker.js"></script>
    <script src="content/js/mapDrawArea.js?v=2015.12.15.001"></script>
    <script type="text/javascript">
        /**
    * 计算一个点是否在多边形里
    * @param {Object} pt 标注点
    * @param {Object} poly 多边形数组
    */
        function isInsidePolygon(pt, poly) {
            for (var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i)
                ((poly[i].lat <= pt.lat && pt.lat < poly[j].lat) || (poly[j].lat <= pt.lat && pt.lat < poly[i].lat)) &&
                    (pt.lng < (poly[j].lng - poly[i].lng) * (pt.lat - poly[i].lat) / (poly[j].lat - poly[i].lat) + poly[i].lng) &&
                    (c = !c);
            return c;
        }
    </script>
    <script>
        var param = <%=mapReqJson%> ;
    </script>
    <script type="text/javascript">
        if (!/^[\d\.\:]+$/.test(location.host)) {
            document.domain = location.host.match(/(\w+\.\w+)(:|$)/)[1];
        }
        $(function () {
            mapDrawArea.init(param);
        })
    </script>
</body>
</html>
